<script>
import { hasClass, addClass, removeClass } from '../utils/dom.js'

/**
     * 文字组件，可根据参数进行省略和展开。
     *              -- Author by clj. on 2017.5.2
     */
export default {
  name: 'VText',

  props: {
    // value: String | Number,      // 要显示的字符串
    value: {
      type: [String, Number],
      default: ''
    },
    limit: {
      // 限定行数，0：不限制，1：限定一行，超出省略，以此类推
      type: Number,
      default: 0
    },
    length: Number, // 限定内容长度，按此剪切，目的是不显示省略号
    expandEnabled: {
      // 展开标识
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    classes() {
      let cls = ''
      if (this.expandEnabled) {
        cls = 'limit' + this.limit
      } else {
        cls =
        this.limit === 1
            ? 'single'
            : this.limit
            ? 'limit' + this.limit
            : ''
      }

      // console.log('计算cls：', cls);

      return cls
    }
  },
  created() {
    //            this.$logger.log('v-text.created: ', this.expandEnabled);
  },
  methods: {
    handleClick() {
      const cls = 'limit' + this.limit
      if (hasClass(this.$el, cls)) {
        removeClass(this.$el, cls)
      } else {
        addClass(this.$el, cls)
      }
    }
  },
  render(createElement) {
    const prop = {
      attrs: { id: 'vText' + this._uid },
      class: [
        'v-text',
        this.className,
        // this.limit === 1 ? 'single' : (this.limit ? 'limit' + this.limit : '')
        this.classes
      ]
    }
    if (this.expandEnabled) {
      // 是否添加展开事件
      prop.on = { click: this.handleClick }
    }
    if (this.center) {
      prop.class.push('centerStyle')
    }

    return createElement(
      'p',
      prop,
      // this.value
      // this.length && this.value ? this.value.substring(0, this.length) : this.value
      this.length && this.value
        ? this.value.substring(0, this.length)
        : this.value
    )
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
    p {
        margin: 0;
        padding: 0;
    }
    .v-text {
        width: 220px;
        font-size: 13px;
        /*line-height: 1.2;*/
        white-space: normal;
        word-break: break-all;
        text-align: left;
        cursor: default;
        user-select: none;
        &.single {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        //modify by clj,2019.05.16
        &[class*="limit0"] {
            /*text-align: left;*/
            /*overflow: hidden;*/
            /*text-overflow: ellipsis;*/
            /*// 限定三行, 后面加..., 此方式为-webkit私有方法...存在一定的兼容性问题, 并非最佳方案. Author by clj. on 2016.12.15*/
            /*display: -webkit-box;*/
            /*-webkit-line-clamp: 1;*/
            /*-webkit-box-orient: vertical;*/
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &[class*="limit0"]::after {
            content: "";
        }

        &.limit2 {
            -webkit-line-clamp: 2;
        }

        &.limit3 {
            -webkit-line-clamp: 3;
        }

        &.limit4 {
            -webkit-line-clamp: 4;
        }

        &.limit5 {
            -webkit-line-clamp: 5;
        }

        .re {
            display: inline-table;
            font-size: 14px;
            line-height:14px;
            color: #007aff;
        }
        .centerStyle {
            text-align: center;
        }
    }
</style>
